<template>
  <div class="box">
    <!-- 一级分类弹出层 -->
    <view
      class="category-popup"
      v-show="categoryPopup"
      @click="changeCategoryPopup"
    >
      <view class="category-popup-box" @click.stop="stop">
        <view
          style="margin: 0 calc((750rpx - 130rpx * 5) / 5 / 2)"
          class="category"
          v-for="(item, index) in first_list"
          :key="item.id"
          @click="toggleTab(index)"
        >
          <view class="category-item">
            <view
              class="color"
              :class="{ active_border: secondIndex == index }"
            >
              {{ item.title.slice(0, 1) }}
            </view>
            <view
              class="category-title"
              :class="{ active_color: secondIndex == index }"
            >
              {{ item.title | hideTitle }}
            </view>
          </view>
        </view>
      </view>
      <div class="category-popup-icon">
        <u-icon name="list"></u-icon>
      </div>
    </view>
    <div class="box-firset2" v-if="type == 2">
      <!-- 分类2的一级分类 -->
      <view class="flex-btw">
        <scroll-view
          style="width: 98%; display: flex;height: 150rpx;"
          scroll-x="true"
          enable-flex
          :scroll-left="scrollLeft"
        >
          <view
            class="category"
            v-for="(item, index) in first_list"
            :key="item.id"
            @click="toggleTab(index)"
          >
            <view class="category-item">
              <view
                class="color"
                :class="{ active_border: secondIndex == index }"
              >
                {{ item.title.slice(0, 1) }}
              </view>
              <view
                class="category-title"
                :class="{ active_color: secondIndex == index }"
              >
                {{ item.title | hideTitle }}
              </view>
            </view>
          </view>
        </scroll-view>
        <!-- <view class="all" @click="changeCategoryPopup">
          <text> 全部 </text>
          <image
            src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2404/18/iIEsVOp8eXnp96MamsRaxlZKp8SHzrWbj5xtaWUP.png"
          ></image>
        </view> -->
      </view>
    </div>
    <div class="box-leftClass" v-if="type == 1" style="height: 100%;">
      <!-- 分类1的一级分类 分类2的二级分类-->
      <scroll-view class="scroll_left" scroll-y="true" :scroll-top="scrollTop">
        <view
          class="sign_second flex-center"
          :class="{ active_text: secondIndex == index }"
          v-for="(item, index) in first_list"
          :key="item.id"
          @click="toggleTab(index)"
        >
          <text>{{ item.title | hideTitle }}</text>
        </view>
      </scroll-view>
    </div>
    <div class="box-leftClass" v-if="type == 2">
      <!-- 分类1的一级分类 分类2的二级分类-->
      <scroll-view class="scroll_left" scroll-y="true" :scroll-top="scrollTop">
        <view
          class="sign_second flex-center"
          :class="{ active_text: current == index }"
          v-for="(item, index) in second_list"
          :key="item.id"
          @click="selectSecond(item, index)"
        >
          <text>{{ item.title | hideTitle1 }}</text>
        </view>
      </scroll-view>
    </div>
    <div class="box-classify">
      <div class="box-classify-firset1" v-if="type == 1">
        <u-tabs
          v-show="!secondClassifyDialog"
          class="row_tabs"
          :is-scroll="true"
          :list="second_list"
          name="title"
          :current="current"
          @change="change"
          :show-bar="false"
          :addBorder="false"
          active-color="#40AE36"
        ></u-tabs>
        <div v-show="secondClassifyDialog" class="row_tabs row_tabs_all">
          全部
        </div>
        <div class="row_drop" @click="openAllSecondClassify">
          <u-icon
            :name="secondClassifyDialog ? 'arrow-up' : 'arrow-down'"
          ></u-icon>
        </div>
      </div>
      <div class="sort" :style="computeHeight">
        <slot name="shop"></slot>
        <div
          class="sort-box"
          v-show="secondClassifyDialog"
          @click="openAllSecondClassify"
        >
          <div class="sort-box-top" @click.stop="stop">
            <div
              class="item"
              :class="{ activeItem: current == index }"
              v-for="(item, index) in second_list"
              :key="index"
              @click="selectSecond(item, index)"
            >
              {{ item.title }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    computeHeight() {
      return {
        "--height": this.type == 1 ? "52px" : "75px",
      };
    },
  },
  props: {
    // type为1时，代表一级分类在上边，二级分类在左边；type为2时，代表一级分类在左边，二级分类在上边
    type: {
      default: 1,
      type: Number,
    },
    first_list: {
      type: Array,
      default: () => [],
    },
    second_list: {
      type: Array,
      default: () => [],
    },
    currentClass: {
      type: Number,
      default: 0,
    },
    newSecondIndex: {
      type: Number | String,
      default: 0,
    },
  },
  watch: {
    currentClass: {
      handler(newVal) {
        this.current = newVal;
      },
      immediate: true,
    },
    newSecondIndex: {
      handler(newVal) {
        this.secondIndex = newVal;
      },
      immediate: true,
    },
  },
  filters: {
    hideTitle(value) {
      if (!value) return "";
      return value.slice(0, 4);
    },
    hideTitle1(value) {
      if (!value) return "";
      return value.slice(0, 5);
    },
  },
  data() {
    return {
      scrollTop: 0, // 竖向滚动条位置
      scrollLeft: 0, // 横向滚动条位置
      secondIndex: 0, // 左边选中下标
      current: this.currentClass,

      categoryPopup: false,
      secondClassifyDialog: false,
    };
  },
  methods: {
    change(index) {
      this.current = index;
      this.$emit("selectSecond", index);
    },
    selectSecond(id, index) {
      this.current = index;
      this.$emit("selectSecond2", id, index);
    },
    toggleTab(index) {
      // 赋值选中下标
      this.secondIndex = index;
      this.$emit("toggleTab", index);
    },
    // 打开第二分类
    openAllSecondClassify() {
      this.secondClassifyDialog = !this.secondClassifyDialog;
    },
    // 打开一级分类
    changeCategoryPopup() {
      this.categoryPopup = !this.categoryPopup;
    },
    // 阻止冒泡
    stop() {},
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: calc(100vh - 122rpx - 120rpx - 240rpx);
  position: relative;
  .category-popup {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
    &-box {
      width: 100%;
      min-height: 470rpx;
      max-height: 900rpx;
      overflow: auto;
      background: #ffffff;
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-evenly;
      align-content: flex-start;
    }
    &-icon {
      height: 30rpx;
      line-height: 30rpx;
      background-color: #dfe0e1;
      border-radius: 0px 0px 20px 20px;
      text-align: center;
    }
  }
  &-leftClass {
    width: 180rpx;
    height: calc(100% - 140rpx);
    padding-bottom: 20rpx;
    background-color: #f8f9fa;
    .scroll_left {
      height: 100%;
      .sign_second {
        height: 110rpx;
        padding: 0 8rpx;
        font-size: 26rpx;
        color: #666666;
        font-family: PingFang SC;
      }
      .active_text {
        background: $white;
        color: $dgreen;
      }
    }
  }
  &-classify {
    width: calc(100% - 180rpx);
    &-firset1 {
      height: 104rpx;
      width: 100%;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding-left: 30rpx;
      box-sizing: border-box;

      .row_tabs {
        width: 87%;
      }
      .row_tabs_all {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 26rpx;
        color: #333333;
      }
      .row_drop {
        width: 13%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      ::v-deep .u-scroll-box {
        display: flex;
        align-items: center;
      }

      ::v-deep .u-tab-item {
        height: 44rpx !important;
        line-height: 44rpx !important;
        padding: 0rpx 10rpx !important;
        background-color: #edeff2 !important;
        margin-right: 10rpx !important;
        border-radius: 6rpx !important;
        font-family: PingFang SC !important;
        font-weight: 500 !important;
        font-size: 24rpx !important;
        flex: none !important;
      }
    }

    .sort {
      width: 100%;
      height: calc(100vh - 122rpx - 120rpx - var(--height) - 230rpx);
      background-color: #ffffff;
      position: relative;
      &-box {
        position: absolute;
        z-index: 99;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        background-color: rgba($color: #000, $alpha: 0.5);
        &-top {
          padding: 0 20rpx 14rpx 20rpx;
          width: 100%;
          background-color: #fff;
          display: flex;
          flex-wrap: wrap;
          box-sizing: border-box;
          justify-content: flex-start;
          max-height: 520rpx;
          overflow: auto;
          .item {
            width: 156rpx;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #666666;
            background: #edeff2;
            border-radius: 10rpx;
            margin-bottom: 16rpx;
            margin-right: 16rpx;
          }
          .activeItem {
            background-color: rgba($color: #40ae36, $alpha: 0.2);
            border-radius: 10rpx;
            color: #333333;
          }
        }
      }
    }
  }

  &-firset2 {
    height: 150rpx;
    width: 750rpx;
    /deep/.uni-scroll-view-content {
      display: flex;
    }
    .all {
      width: 10%;
      height: 150rpx;
      background: #f8f9fa;
      box-shadow: -1px 0px 9px 0px rgba(8, 1, 3, 0.2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text {
        writing-mode: vertical-rl; /* 使用 vertical-rl 将文字从右向左竖排 */
      }
      image {
        width: 36rpx;
        height: 36rpx;
      }
    }
  }
  .category {
    min-width: 130rpx;
    height: 150rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: PingFang SC;
    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .color {
      width: 80rpx;
      height: 80rpx;
      border-radius: 80rpx;
      text-align: center;
      line-height: 78rpx;
      font-weight: 800;
      font-size: 36rpx;
      border: 2rpx solid transparent;
      box-sizing: border-box;
    }
    &:nth-child(5n + 1) .color {
      background: rgba(64, 174, 54, 0.1);
      color: #40ae36;
    }
    &:nth-child(5n + 2) .color {
      background: rgba(235, 97, 0, 0.1);
      color: #eb6100;
    }
    &:nth-child(5n + 3) .color {
      background: rgba(243, 152, 0, 0.1);
      color: #f39800;
    }
    &:nth-child(5n + 4) .color {
      background: rgba(0, 158, 150, 0.1);
      color: #009e96;
    }
    &:nth-child(5n + 5) .color {
      background: rgba(96, 25, 134, 0.1);
      color: #601986;
    }
    .active_border {
      border: 2rpx solid #40ae36;
    }
    &-title {
      font-size: 24rpx;
      margin-top: 6rpx;
    }
    .active_color {
      color: #40ae36;
    }
  }
}
</style>